<template>
  <el-form ref="formRef" :hide-required-asterisk="true" :model="form"
           :rules="rules" label-position="left" status-icon>
    <el-form-item prop="account">
      <el-input v-model="form.account" clearable placeholder="请输入用户名" size="large">
        <template #prefix>
          <el-icon :size="23">
            <User/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="email">
      <el-input v-model="form.email" clearable placeholder="请输入邮箱" size="large">
        <template #prefix>
          <el-icon :size="23">
            <Message/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="form.password" clearable placeholder="请输入密码" show-password size="large"
                type="password">
        <template #prefix>
          <el-icon :size="23">
            <Lock/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="confirmPassword">
      <el-input v-model="form.confirmPassword" clearable placeholder="确认密码必须与注册的密码一致" show-password size="large"
                type="password">
        <template #prefix>
          <el-icon :size="23">
            <Lock/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button size="large" style="width: 100%" type="success" @click="register(formRef)">注册</el-button>
    </el-form-item>
    <div style="display: flex;justify-content: space-between;">
      <el-button link @click="$emit('update:tab','login')">去登录</el-button>
    </div>
  </el-form>
</template>

<script setup>
import {reactive, ref} from 'vue'

import {useRouter} from "vue-router";
import {Lock, Message, User} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {buyerRegister} from "@/apis/user.js";

const router = useRouter()

const emits = defineEmits(["update:tab"])

const form = reactive({
  account: '',
  phone: '',
  email: '',
  password: '',
  confirmPassword: '',
  verifyCode: '',
})

const rules = {
  account: [
    {required: true, message: '用户名不能为空', trigger: ['blur']},
  ],
  email: [
    {required: true, message: '邮箱不能为空', trigger: ['blur']},
    {
      validator: (rule, value) => /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/.test(value),
      message: "邮箱格式错误",
      trigger: ['blur']
    }
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: ['blur']}
  ],
  confirmPassword: [
    {required: true, message: '确认密码不能为空', trigger: ['blur']},
    {
      validator: (rule, value) => form.password === value,
      message: "确认密码必须与注册的密码一致!",
      trigger: ['blur']
    }
  ]
}
const formRef = ref(null)
// 用户登录
const register = formEL => {
  formEL.validate(async (valid) => {
    if (valid) {
      form.account = form.email
      const res = await buyerRegister(form)
      if (res.code === 200) {
        ElMessage({
          message: "注册成功",
          type: 'success',
          offset: window.innerHeight / 2,
        })
        emits('update:tab', 'login')
      }
    }
  })
}
</script>

<style scoped>
.login-code {
  cursor: pointer;
}

.el-radio-group {
  width: 100%;
  justify-content: space-between;
}
</style>